<template>
  <a-layout id="common-layout">
    <Header />
    <a-layout>
      <Silder />
      <a-layout>
        <Content />
      </a-layout>
    </a-layout>
    <Footer />
  </a-layout>
</template>

<script>
import Socket from '@/util/socket'
import Silder from "./silder";
import Header from "./top";
import Content from "./content";
import Footer from "./foot";
export default {
  components: { Silder, Header, Content, Footer },
  data() {
    return {
      stompClient:null
    };
  },
  mounted(){
    this.initWebSocket()
  },
  destroyed: function () { // 离开页面生命周期函数              
		this.websocketclose();        
	},
  methods:{
    initWebSocket: function () {    
      Socket(this.$store.state.user.user.id).register({onopen:this.websocketonopen,onerror:this.websocketonerror,onmessage:this.websocketonmessage,onclose:this.websocketclose})             
		},              
		websocketonopen: function () {                
			this.$notify({
          title: '提示',
          message: '您以连接上即时消息通道',
          duration: 0
      });            
		},              
		websocketonerror: function (e) {                
			this.$notify({
          title: '提示',
          message: '当前消息通道无法连接，请与管理员联系',
          duration: 0
      });       
		},              
		websocketonmessage: function (e) { 
      console.error(e);
                     
      this.$notify({
          title: '即时消息',
          message: e.data,
          duration: 0
      });            
		},              
		websocketclose: function (e) {                
			this.$notify({
          title: '提示',
          message: '当前消息通道已关闭',
          duration: 0
      });         
		}
  }
};
</script>

<style lang="scss">
#common-layout {
  height: 100vh;
}
</style>